<template>
  <div class="service-container">
    <div class="service-header">
      <div class="service-title-wrapper">
        <span class="service-line"></span>
        <span class="service-title">为你服务</span>
        <span class="service-line"></span>
      </div>
    </div>

    <div class="service-list">
      <div
        v-for="(item, index) in serviceItems"
        :key="index"
        class="service-item"
        @mouseover="activeIndex = index"
        @mouseleave="activeIndex = -1"
      >
        <div class="service-icon">
          <img
            :src="activeIndex === index ? serviceItems2[index].icon : item.icon"
            :alt="item.text"
          />
        </div>
        <div
          class="service-text"
          :class="{ 'active-text': activeIndex === index }"
        >
          {{ item.text }}
        </div>
        <div v-if="index < serviceItems.length - 1" class="separator">|</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "End",
  data() {
    return {
      activeIndex: -1,
      serviceItems: [
        {
          icon: require("@/assets/recommend/img0.png"),
          text: "团购服务",
          hoverColor: "#1890ff",
        },
        {
          icon: require("@/assets/recommend/img2.png"),
          text: "会员权益",
          hoverColor: "#1890ff",
        },
        {
          icon: require("@/assets/recommend/img4.png"),
          text: "Apple授权店",
          hoverColor: "#1890ff",
        },
        {
          icon: require("@/assets/recommend/img6.png"),
          text: "家电医院",
          hoverColor: "#1890ff",
        },
      ],
      serviceItems2: [
        { icon: require("@/assets/recommend/img1.png") },
        { icon: require("@/assets/recommend/img3.png") },
        { icon: require("@/assets/recommend/img5.png")},
        { icon: require("@/assets/recommend/img7.png") },
      ],
    };
  },
};
</script>

<style scoped>
.service-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}
.service-title-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-header {
  margin: 30px 0;
  text-align: center;
  position: relative;
}
.service-title {
  font-size: 30px;
  color: #333;
  padding: 0 20px;
  position: relative;
  background: #f3f3f3;
  z-index: 1;
}
.service-line {
  flex: 1;
  max-width: 100px;
  height: 1px;
  background: black;
  position: relative;
}

.service-list {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 30px;
  height: 150px;
  background-color: white;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 0 15px;
  flex: 1;
  min-width: 150px;
}
.service-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 12px;
}

.service-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.service-text {
  font-size: 16px;
  color: #000;
  transition: color 0.3s ease;
  font-weight: 500;
}

.service-item:hover .service-text {
  color: #0099A8;
}

.separator {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #e0e0e0;
  font-size: 16px;
  height: 20px;
  line-height: 20px;
}

@media (max-width: 768px) {
  .service-item {
    min-width: 120px;
    padding: 0 10px;
  }

  .title-text {
    font-size: 16px;
  }

  .service-text {
    font-size: 12px;
  }

  .title-line {
    max-width: 30px;
  }

  .service-icon {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 480px) {
  .service-list {
    flex-wrap: wrap;
  }

  .service-item {
    width: 50%;
    margin-bottom: 20px;
    min-width: auto;
  }

  .service-item:nth-child(2n) .separator {
    display: none;
  }
}
</style>